<template>
  <div class="container">
    <div class="container-left">
      <div class="input-top">
        <el-input
          placeholder="输入关键字进行搜索"
          v-model="filterText"
          clearable
          suffix-icon="iconfont icon-sousuo2"
        >
        </el-input>
      </div>
      <div
        class="newProject"
        @click.stop="dialogVisible = true"
        v-show="xsyc === '1' ? true : false"
      >
        <i class="iconfont icon-xinjian"></i>
        <span>新建项目</span>
      </div>
      <div class="treePlate scroll_wrap">
        <div class="sort">可拖拽同级排序，交换位置</div>
        <el-tree
          class="filter-tree"
          :data="data"
          :props="defaultProps"
          draggable
          default-expand-all
          node-key="id"
          :expand-on-click-node="false"
          :current-node-key="currentNodeKey"
          :filter-node-method="filterNode"
          @node-click="handleNodeClick"
          ref="tree"
          highlight-current
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <el-tooltip
              class="item"
              effect="light"
              :content="node.label"
              placement="top-start"
            >
              <span
                class="nodeLabel"
                style="color: #000000"
                v-if="data.part_company_type == 1"
              >
                <i class="el-icon-s-fold"></i>
                {{ node.label }}
              </span>
              <span
                class="nodeLabel"
                style="color: #000079"
                v-else-if="data.part_company_type == 2"
              >
                <i class="el-icon-s-unfold"></i>
                {{ node.label }}
              </span>
              <span
                class="nodeLabel"
                style="color: #46a3ff"
                v-else-if="data.part_company_type == 3"
              >
                <i class="el-icon-s-operation"></i>
                {{ node.label }}
              </span>
              <span class="nodeLabel" v-else>
                {{ node.label }}
              </span>
            </el-tooltip>
            <span class="nodeLeft">
              <el-button
                class="nodeBtn"
                size="medium"
                type="text"
                @click="() => append(data)"
              >
                <i class="iconfont icon-xinjian"></i>
              </el-button>
              <el-button
                class="nodeBtn"
                size="medium"
                type="text"
                @click.stop="() => remove(node, data)"
              >
                <i class="iconfont icon-a-shanchu1"></i>
              </el-button>
              <el-button
                class="nodeBtn"
                size="medium"
                type="text"
                @click="() => edit(data)"
              >
                <i class="iconfont icon-a-bianji13"></i>
              </el-button>
            </span>
          </span>
        </el-tree>
      </div>
    </div>
    <div class="container-right">
      <el-form :inline="true">
        <div class="commontop">
          <div class="commontop-left">
            <el-input
              v-model="IDS.keyword"
              placeholder="请输入内容"
              @change="INput"
              @clear="INput"
              @keyup.enter.native="goSearch()"
              clearable
              prefix-icon="el-icon-search"
            ></el-input>
            <el-button
              @click="goSearch"
              class="searchbgc"
              icon="iconfont icon-sousuo2"
              >搜索</el-button
            >
          </div>
          <div class="commontop-right">
            <el-button
              class="green"
              icon="iconfont icon-tianjiaanjuanfengmian"
              @click="ShowAdd"
              v-show="xsyc === '1' ? true : false"
              >添加成员</el-button
            >
            <el-button
              class="green"
              icon="iconfont icon-tianjiaanjuanfengmian"
              @click="Drawer"
              v-show="xsyc === '1' ? true : false"
              >批量添加成员</el-button
            >
          </div>
        </div>
      </el-form>
      <div class="tablePlate">
        <el-table
          v-loading="isLoading"
          ref="multipleSelection"
          :data="tableData"
          :header-cell-style="{ backgroundColor: '#3963fd', color: '#fff' }"
          style="width: 100%; margin-top: 20px"
        >
          <template slot="empty">
            <img
              src="@/assets/imgs/暂未数据.png"
              alt
              style="margin-top: 104px"
            />
            <p style="margin-top: 15px; margin-bottom: 104px">暂未有数据</p>
          </template>
          <el-table-column type="selection"></el-table-column>
          <el-table-column prop="id" label="ID" width="80"></el-table-column>
          <el-table-column prop="nickname" label="姓名"></el-table-column>
          <el-table-column
            prop="role_name"
            :show-overflow-tooltip="true"
            label="角色"
          ></el-table-column>
          <el-table-column
            prop="phone"
            :show-overflow-tooltip="true"
            label="手机"
          ></el-table-column>
          <el-table-column label="状态" width="100">
            <template slot-scope="scope">
              <el-tag
                v-if="tableData[scope.$index].deleted_at > 0"
                type="danger"
                >已删除</el-tag
              >
              <el-tag v-else-if="tableData[scope.$index].status == 1"
                >正常</el-tag
              >
              <el-tag
                v-else-if="tableData[scope.$index].status == 0"
                type="info"
                >未审核</el-tag
              >
              <el-tag
                v-else-if="tableData[scope.$index].status == 2"
                type="warning"
                >禁用</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120px">
            <template
              slot-scope="scope"
              v-if="scope.row.is_edit == 0 ? false : true"
            >
              <el-button
                class="green"
                size="mini"
                @click="handleEdit(scope.row.id)"
                ><i class="el-icon-edit"></i
              ></el-button>
              <el-button
                size="mini"
                class="red"
                @click.native.prevent="deleteRow(scope.row.id)"
                ><i class="el-icon-delete"></i
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current_page"
            :page-sizes="pageSizeArr"
            :page-size="IDS.per_page"
            layout="total, sizes, prev, pager, next"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog
      class="tab"
      title="编辑"
      width="580px"
      :visible.sync="dialogEditVisible"
    >
      <el-form :model="editForm" ref="editForm">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input
            placeholder="请输入姓名"
            v-model="editForm.nickname"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="角色" :label-width="formLabelWidth">
          <el-tree
            ref="tree"
            :data="companies"
            show-checkbox
            node-key="id"
            @check="treeCheckNode"
            :default-checked-keys="deptKey"
            :props="defaultProps2"
          >
          </el-tree>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-radio-group v-model="editForm.status">
            <el-radio :label="2">禁用</el-radio>
            <el-radio :label="1">正常</el-radio>
            <!-- <el-radio :label="0">未审核</el-radio> -->
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditVisible = false">取 消</el-button>
        <el-button type="primary" @click="editModify('editForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog title="新建项目" :visible.sync="dialogVisible" width="570px">
      <div>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="60px"
          label-position="left"
        >
          <!--  <el-form-item prop="company_id" label="上级">
            <el-select clearable 
              v-model="ruleForm.company_id"
              filterable
              placeholder="请选择上级"
            >
              <el-option
                v-for="item in options1"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item prop="title">
            <el-input
              v-model="ruleForm.title"
              placeholder="请输入项目名称"
            ></el-input>
            <div class="tips">项目名与立项批复文件名称一致</div>
          </el-form-item>
          <el-form-item prop="document_number">
            <el-input
              v-model="ruleForm.document_number"
              placeholder="请输入项目代码"
            ></el-input>
            <div class="tips">用于档号前缀</div>
          </el-form-item>

          <div class="login-btn">
            <el-button type="info" @click="dialogVisible = false"
              >取消</el-button
            >
            <el-button type="primary" @click="submitProjectForm('ruleForm')"
              >提交</el-button
            >
          </div>
        </el-form>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="outerVisible" width="570px">
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
        class="tab"
        type="card"
        stretch
      >
        <el-tab-pane label="新增部门" name="first">
          <el-form
            :model="companyForm"
            :rules="companyFormrules"
            ref="companyForm"
            label-width="88px"
            label-position="left"
          >
            <el-form-item prop="title" label="部门名称">
              <el-input
                v-model="companyForm.title"
                placeholder="请输入部门名称"
              ></el-input>
            </el-form-item>
            <div
              class="login-btn"
              style="
                margin: 0 auto;
                width: 40%;
                display: flex;
                justify-content: space-between;
              "
            >
              <el-button type="info" @click="outerVisible = false"
                >取消</el-button
              >
              <el-button type="primary" @click="submitForm('companyForm')"
                >提交</el-button
              >
            </div>
          </el-form>
        </el-tab-pane>
        <el-tab-pane v-if="isShow" label="新增参建单位" name="second">
          <el-form
            :model="ruleFormSector"
            :rules="ruleSector"
            ref="ruleFormSector"
            label-width="60px"
            label-position="left"
          >
            <el-form-item
              prop="type"
              :label-width="formLabelWidth"
              label="单位类型"
            >
              <el-select clearable 
                v-model="ruleFormSector.type"
                filterable
                placeholder="请选择单位类型"
              >
                <el-option
                  v-for="item in options2"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                  @click.native="getChange(item)"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              prop="title"
              :label-width="formLabelWidth"
              label="单位名称"
            >
              <el-input
                v-model="ruleFormSector.title"
                placeholder="请输入单位名称"
              ></el-input>
            </el-form-item>
            <el-form-item
              prop="responsible"
              :label-width="formLabelWidth"
              label="责任者"
            >
              <el-input
                v-model="ruleFormSector.responsible"
                placeholder="请输入责任者"
              ></el-input>
            </el-form-item>
            <el-form-item
              prop="is_part_unit"
              :label-width="formLabelWidth"
              label="是否是参建单位"
            >
              <el-switch
                v-model="ruleFormSector.is_part_unit"
                disabled
                :active-value="1"
                :inactive-value="0"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </el-form-item>
            <el-form-item
              prop="sort"
              :label-width="formLabelWidth"
              label="排序"
            >
              <el-input-number
                v-model="ruleFormSector.sort"
                :min="0"
                :max="10"
                label="描述文字"
              ></el-input-number>
            </el-form-item>

            <div class="login-btn">
              <el-button type="info" @click="outerVisible = false"
                >取消</el-button
              >
              <el-button
                type="primary"
                @click="submitFormName('ruleFormSector')"
                >提交</el-button
              >
            </div>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <el-dialog title="修改" :visible.sync="dialogVisibleAmend" width="570px">
      <el-tabs v-model="activeNameAmend" class="tab">
        <el-tab-pane label="修改名称" name="first">
          <el-form
            :model="ruleFormAmend"
            :rules="ruleAmend"
            ref="ruleFormAmend"
            label-width="60px"
            label-position="left"
          >
            <el-form-item prop="title">
              <el-input
                v-model="ruleFormAmend.title"
                placeholder="请输入部门名称"
              ></el-input>
            </el-form-item>

            <div class="login-btn">
              <el-button @click="dialogVisibleAmend = false">取消</el-button>
              <el-button type="primary" @click="submitsForm('ruleFormAmend')"
                >提交</el-button
              >
            </div>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <el-dialog title="添加成员" :visible.sync="dialogFormVisible" width="580px">
      <el-form :model="memberForm">
        <el-form-item label="手机号:">
          <el-input
            v-model="memberForm.phone"
            @keyup.enter.native="getMenbers"
            autocomplete="off"
          ></el-input>
          <el-button
            icon="el-icon-search"
            type="primary"
            @click="getMenbers"
          ></el-button>
        </el-form-item>
        <div v-show="iSShow">
          <el-descriptions title="用户信息">
            <el-descriptions-item label="用户名">{{
              this.tableDatas.nickname
            }}</el-descriptions-item>
            <el-descriptions-item label="手机号">{{
              this.tableDatas.phone
            }}</el-descriptions-item>
          </el-descriptions>

          <el-tree :data="Memberdata" :props="defaultProps"></el-tree>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="AddMembers" :disabled="ShowBtn"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <common-dawer
      v-if="drawer"
      ref="demoDrawer"
      @closeDrawer="closeDrawer"
      :table="tables"
      :num="NUmber"
    ></common-dawer>
  </div>
</template>

<script>
import {
  organized,
  organizedUsers,
  delorganizedUsers,
} from "../../api/home/index";
import {
  usersQuery,
  usersModify,
  GetOne,
  AddOne,
} from "../../api/recycle/index";
import commonInfo from "@/utils/common";
import CommonDawer from "../../components/common/commonTab.vue";
import {
  departments,
  Projects,
  deldepartments,
  Getdepartments,
} from "../../api/company/index";
import {
  AddCompanies,
  delProjects,
  Editorganized,
  seeProjects,
} from "../../api/project/index";
import { delpartCompanies, GetpartCompanies } from "../../api/Template/index";
/* let id = 1000; */
export default {
  components: {
    CommonDawer,
  },
  data() {
    return {
      //按钮显示隐藏
      xsyc: "1",
      /* 表格数据 */
      tableData: [],
      /* 是否显示添加成员信息的蒙尘 */
      iSShow: false,
      /* 每页显示个数 */
      pageSizeArr: JSON.parse(JSON.stringify(commonInfo.pageSizeArr)),
      /* 当前页 */
      current_page: 1,
      /* 总条数 */
      total: 1,
      /* 加载页面 */
      isLoading: true,
      //添加成员单个蒙尘
      dialogFormVisible: false,
      /* 添加单个成员搜索手机号*/
      memberForm: {
        phone: "",
      },
      /*  editForm: {
        nickname: "",
       
        checkedCities: ["超级管理员", "主管"],
        phone: "",
      }, */
      /* 表单宽度 */
      formLabelWidth: "120px",
      /* 批量导入成员传递的值 */
      tables: {
        company_id: "",
        department_id: "",
        part_company_id: "",
        project_id: "",
      },

      /* 单个添加成员的值 */
      Menbers: {
        company_id: "",
        user_id: "",
        department_id: "",
        part_company_id: "",
        project_id: "",
      },

      currentNodeKey: "",
      /* 单个添加成员是否禁用按钮 */
      ShowBtn: true,
      /* 区分导入的值 */
      NUmber: "",
      /* 是否显示导入蒙尘 */
      drawer: false,
      /* 搜索树状图 */
      filterText: "",
      /* 树状图数据 */
      data: [],
      /* 树状图当前名字或子集 */
      defaultProps: {
        children: "children",
        label: "title",
      },

      /* 用户删除 */
      uerDel: {
        company_id: 0,
        department_id: 0,
        part_company_id: 0,
        project_id: 0,
        user_id: "",
      },
      /* 判断是否显示蒙尘（当是项目点击时显示添加参建单位） */
      isShow: false,
      /* 标签页第一个显示 */
      activeName: "first",
      /* 标签页第一个显示 */
      activeNameAmend: "first",
      /*       companyNameAmend: "first", */
      /* 新建项目表单数据 */
      ruleForm: {
        /*   company_id: "", */
        title: "",
        document_number: "",
      },
      /* 新建项目表单失焦判断 */
      rules: {
        company_id: [
          {
            required: true,
            message: "请选择上级",
            trigger: "change",
          },
        ],
        title: [
          {
            required: true,
            message: "请输入项目名称",
            trigger: "blur",
          },
        ],
        document_number: [
          {
            required: true,
            message: "请输入项目名称代码",
            trigger: "blur",
          },
        ],
      },
      /* 搜索手机号当前信息的树状图和数据 */
      Memberdata: [],
      tableDatas: [],
      /* 新建部门表单数据 */
      companyForm: {
        title: "",
        department_id: "",
        project_id: "",
        part_company_id: "",
        company_id: "",
      },
      /*  editForm: {
        user_id: "",
        department_id: "",
        project_id: "",
        part_company_id: "",
        company_id: "",
      }, */
      //
      /* 获取当前公司某个部门人员信息的值 */
      IDS: {
        company_id: 0,
        department_id: 0,
        part_company_id: 0,
        project_id: 0,
        keyword: "",
        per_page: 10,
        page: 1,
      },
      /* 新建部门表单失焦判断 */
      companyFormrules: {
        title: [
          {
            required: true,
            message: "请输入部门名称",
            trigger: "blur",
          },
        ],
      },

      /*  options1: [], */
      /* 选择新建什么单位类型的参建单位 */
      options2: [
        { id: 1, canjainId: 0, title: "建设单位" },
        { id: 2, canjainId: 1, title: "参建单位的监理单位" },
        { id: 3, canjainId: 1, title: "参建单位的施工单位" },
      ],
      /* 新增参建单位表单数据 */
      ruleFormSector: {
        title: "",
        responsible: "",
        type: "",
        is_part_unit: 0,
        sort: "",
        company_id: "",
        project_id: "",
      },
      ruleSector: {},
      /* 修改部门或参建单位或项目表单数据 */
      ruleFormAmend: {
        title: "",
        type: "",
        id: "",
        company_id: "",
      },
      /* 修改部门或参建单位或项目表单数据失焦判断 */
      ruleAmend: {
        title: [
          {
            required: true,
            message: "请输入部门名称",
            trigger: "blur",
          },
        ],
      },
      /* 新增参建单位蒙尘 */
      outerVisible: false,
      /* 新建项目蒙尘 */
      dialogVisible: false,
      /* 树状图修改蒙尘 */
      dialogVisibleAmend: false,
      //表格编辑蒙尘
      dialogEditVisible: false,
      /* 表格编辑表单数据 */
      editForm: {
        id: "",
        nickname: "",
        roles: [],
        phone: "",
        status: 2,
      },
      /* 表格角色编辑数组 */
      companies: [],
      /* 默认勾选的节点的key的值 */
      deptKey: [],
      /* 节点选中的值 */
      permissionsId: [],
      /*  角色树状图的子集和标题*/
      defaultProps2: {
        children: "roles",
        label: "title",
      },
    };
  },
  watch: {
    /* 监听树状图 */
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    /* 获取公司列表 */
    async loadData() {
      let res = await organized();
      console.log(res, "123");
      this.data = res.data.data;
      this.$nextTick(() => {
        // myTree 数组件的ref  默认让第一项高亮
        // data是树组件对应的数据
        // 通过data中的第一项的id找到对应的节点，然后把这个节点设置为高亮
        this.$refs["tree"].setCurrentKey(sessionStorage.getItem("clickTdOrg"));
        console.log(111);
      });
      /*   this.options1 = res.data.data; */
      //console.log("1:", res.data.data);
      //console.log("2:", res.data.data[0].departments);
      /* for (let item1 of this.data) {
        for (let item2 of res.data.data) {
          if (item1.id == item2.id) {
            let a = item2.departments;
            let b = item2.projects;
            item1.children = a.concat(b);
          }
        }
      } */
    },
    /* 输入框发生改变时 */
    INput() {
      if (this.IDS.keyword == "") {
        this.orgUser(this.IDS);
      }
    },
    /* 输入框搜索 */
    async goSearch() {
      console.log(this.IDS);
      if (this.IDS.keyword == "") {
        this.$message.warning("查询条件不能为空！");
        return;
      }
      let res = await organizedUsers(this.IDS);
      console.log(res);
      if (res.data.code == 200) {
        this.tableData = res.data.data.data;
        this.total = res.data.data.total;
        this.current_page = res.data.data.current_page;
      }
    },
    /* 点击部门获取当前部门的人员 */
    async orgUser(num) {
      num = JSON.parse(sessionStorage.getItem("clickTdOrg"));
      let res = await organizedUsers(num);
      console.log(res, "11111");
      if (res.data.code == 200) {
        this.tableData = res.data.data.data;
        this.total = res.data.data.total;
        this.current_page = res.data.data.current_page;
        this.isLoading = false;
      }
    },
    /* 选择添加 */
    handleClick(e) {
      if (e.label == "新增部门") {
        this.$refs["companyForm"].resetFields();
      } else if (e.label == "新增参建单位") {
        this.$refs["ruleFormSector"].resetFields();
      }
    },
    /* 表格删除 */
    deleteRow(id) {
      this.uerDel.user_id = id;
      this.$confirm("确认删除？")
        .then(async (_) => {
          let res = await delorganizedUsers(this.uerDel);
          console.log(res);
          if (res.data.code == 200) {
            this.$message({
              message: res.data.msg,
              showClose: true,
              duration: 3000,
              type: "success",
            });
            console.log(this.IDS);
            this.orgUser(this.IDS);
          } else {
            this.$message({
              message: res.data.msg,
              showClose: true,
              duration: 3000,
              type: "error",
            });
          }
        })
        .catch((_) => {});
    },
    // 树状图节点改变时
    treeCheckNode(nodeObject, checkObject) {
      console.log(nodeObject, checkObject);
      this.editForm.roles = checkObject.checkedKeys;
    },
    /* 表格编辑修改 */
    async handleEdit(id) {
      let res = await usersQuery({ id });
      console.log(res, "11");
      this.editForm.id = res.data.data.id;
      this.editForm.phone = res.data.data.phone;
      this.editForm.nickname = res.data.data.nickname;
      this.editForm.status = res.data.data.status;
      this.companies = res.data.data.companies;
      console.log(this.editForm, "112");
      let Check = res.data.data.companies[0].roles;
      console.log(res.data.data.companies[0].roles);
      let aps = [];
      Check.map((item) => {
        console.log(item);
        if (item.select == 1) {
          aps.push(item.id);
        }
        return item;
      });
      this.deptKey = aps;
      console.log(aps);
      this.dialogEditVisible = true;
    },
    /* 表格编辑修改 */
    editModify(formName) {
      console.log(this.editForm);
      this.$refs[formName].validate(async (valid) => {
        //console.log(valid);
        if (valid) {
          let res = await usersModify(this.editForm);
          //console.log(res);
          console.log(res.data, "1123");
          if (res.data.code === 200) {
            this.$message({
              message: res.data.msg,
              showClose: true,
              duration: 3000,
              type: "success",
            });
            console.log(this.IDS);
            this.orgUser(this.IDS);
            this.dialogEditVisible = false;
          } else {
            this.$message({
              message: res.data.msg,
              showClose: true,
              duration: 3000,
              type: "error",
            });
          }
        }
      });
    },
    //显示添加成员蒙尘
    ShowAdd() {
      if (this.Menbers.company_id == "") {
        this.$message({
          message: "请先选中去公司的哪个单位",
          showClose: true,
          duration: 3000,
          type: "warning",
        });
      } else {
        this.dialogFormVisible = true;
      }
    },
    //搜索手机号
    async getMenbers() {
      this.iSShow = true;
      let res = await GetOne(this.memberForm);
      console.log(res);
      if (res.data.code == 200) {
        this.Menbers.user_id = res.data.data.id;
        this.tableDatas = res.data.data;
        this.Memberdata = res.data.data.companies;
        this.ShowBtn = false;
      }
    },

    //确定手机号
    async AddMembers() {
      console.log(this.Menbers);
      let res = await AddOne(this.Menbers);
      console.log(res);
      if (res.data.code == 200) {
        this.dialogFormVisible = false;
        this.ShowBtn = true;
        this.$message({
          message: res.data.msg,
          showClose: true,
          duration: 3000,
          type: "success",
        });
        this.orgUser(this.IDS);
      } else {
        this.$message({
          message: res.data.msg,
          showClose: true,
          duration: 3000,
          type: "error",
        });
        this.dialogFormVisible = false;
      }
    },
    //分页
    handleCurrentChange(val) {
      this.current_page = val;
      this.IDS.page = val;
      this.orgUser(this.IDS);
    },
    //分页
    handleSizeChange(val) {
      this.IDS.per_page = val;
      this.orgUser(this.IDS);
    },
    //新增部门
    submitForm(formName) {
      console.log(this.companyForm);
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          console.log(valid);
          console.log(this.companyForm);
          let res = await departments(this.companyForm);
          console.log(res);
          if (res.data.code === 200) {
            this.$message({
              message: res.data.msg,
              showClose: true,
              duration: 3000,
              type: "success",
            });
            this.$refs[formName].resetFields();
            this.loadData();
            this.outerVisible = false;
          } else {
            this.$message({
              message: res.data.msg,
              showClose: true,
              duration: 3000,
              type: "error",
            });
          }
        }
      });
    },
    //下拉框被选中是下面显示是否是参建单位
    getChange(data) {
      console.log(data);
      if (data.canjainId == 1) {
        this.ruleFormSector.is_part_unit = 1;
      } else if (data.canjainId == 0) {
        this.ruleFormSector.is_part_unit = 0;
      }
    },
    //新增参建单位
    submitFormName(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          console.log(valid);
          console.log(this.ruleFormSector);
          let res = await AddCompanies(this.ruleFormSector);
          console.log(res);
          if (res.data.code === 200) {
            this.$message({
              message: res.data.msg,
              showClose: true,
              duration: 3000,
              type: "success",
            });
            this.$refs[formName].resetFields();
            this.loadData();
            this.outerVisible = false;
          } else {
            this.$message({
              message: res.data.msg,
              type: "error",
              showClose: true,
              duration: 3000,
            });
          }
        }
      });
    },
    /* 树状图修改 */
    submitsForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          console.log(valid);
          console.log(this.ruleFormAmend);
          let res = await Editorganized(this.ruleFormAmend);
          console.log(res);
          if (res.data.code === 200) {
            this.$message({
              message: res.data.msg,
              type: "success",
              showClose: true,
              duration: 3000,
            });
            this.$refs[formName].resetFields();
            this.loadData();
            this.dialogVisibleAmend = false;
          } else {
            this.$message({
              message: res.data.msg,
              showClose: true,
              duration: 3000,
              type: "error",
            });
          }
        }
      });
    },

    //新增项目确定
    submitProjectForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          console.log(valid);
          console.log(this.ruleForm);
          let res = await Projects(this.ruleForm);
          console.log(res);
          if (res.data.code === 200) {
            this.$message({
              message: res.data.msg,
              showClose: true,
              duration: 3000,
              type: "success",
            });
            this.$refs[formName].resetFields();
            this.loadData();
            this.dialogVisible = false;
          } else {
            this.$message({
              message: res.data.msg,
              showClose: true,
              duration: 3000,
              type: "error",
            });
          }
        }
      });
    },
    /* 节点筛选显示或隐藏 */
    filterNode(value, data) {
      if (!value) return true;
      return data.title.indexOf(value) !== -1;
    },
    //当选中树形组件的某个数据时的基本信息
    handleNodeClick(data) {
      console.log("data:", data);
      this.tables.project_id = data.project_id;
      this.tables.part_company_id = data.part_company_id;
      this.tables.department_id = data.department_id;
      this.tables.company_id = data.company_id;
      this.uerDel.project_id = data.project_id;
      this.uerDel.part_company_id = data.part_company_id;
      this.uerDel.department_id = data.department_id;
      this.uerDel.company_id = data.company_id;
      this.Menbers.project_id = data.project_id;
      this.Menbers.part_company_id = data.part_company_id;
      this.Menbers.department_id = data.department_id;
      this.Menbers.company_id = data.company_id;
      /*  this.editForm.project_id = data.project_id;
      this.editForm.part_company_id = data.part_company_id;
      this.editForm.department_id = data.department_id;
      this.editForm.company_id = data.company_id; */
      console.log(this.tables, "111");
      //项目
      if (data.type == "company") {
        console.log(123);
        this.IDS.company_id = data.company_id;
        this.IDS.department_id = 0;
        this.IDS.part_company_id = 0;
        this.IDS.project_id = 0;
      } else if (data.type == "department") {
        this.IDS.company_id = 0;
        this.IDS.department_id = data.department_id;
        this.IDS.part_company_id = 0;
        this.IDS.project_id = 0;
      } else if (data.type == "project") {
        this.IDS.company_id = 0;
        this.IDS.department_id = 0;
        this.IDS.part_company_id = 0;
        this.IDS.project_id = data.project_id;
        this.ruleFormSector.company_id = data.company_id;
        this.ruleFormSector.project_id = data.project_id;
      } else if (data.type == "part_company") {
        this.IDS.company_id = 0;
        this.IDS.department_id = 0;
        this.IDS.part_company_id = data.part_company_id;
        this.IDS.project_id = 0;
      }
      sessionStorage.setItem("clickTdOrg", JSON.stringify(this.IDS));

      console.log("IDS:", this.IDS);
      this.orgUser(this.IDS);
    },
    //树状图删除
    remove(node, data) {
      console.log(data);
      const current = node.childNodes;
      console.log(current);
      console.log(1);

      if (current.length == "0") {
        this.$confirm("确认删除？")
          .then(async (_) => {
            if (data.type == "department") {
              console.log(11);
              let id = data.department_id;
              let res = await deldepartments({ id });
              if (res.data.code === 200) {
                this.$message({
                  message: res.data.msg,
                  showClose: true,
                  duration: 3000,
                  type: "success",
                });
                this.loadData();
              } else {
                this.$message({
                  message: res.data.msg,
                  showClose: true,
                  duration: 3000,
                  type: "error",
                });
              }
              console.log(res);
            } else if (data.type == "project") {
              console.log(22);
              let id = data.project_id;
              let res = await delProjects({ id });
              if (res.data.code === 200) {
                this.$message({
                  message: res.data.msg,
                  showClose: true,
                  duration: 3000,
                  type: "success",
                });
                this.loadData();
              } else {
                this.$message({
                  message: res.data.msg,
                  showClose: true,
                  duration: 3000,
                  type: "error",
                });
              }
              console.log(res);
            } else if (data.type == "part_company") {
              console.log(33);
              let id = data.part_company_id;
              console.log(this.id);
              let res = await delpartCompanies({ id });
              if (res.data.code === 200) {
                this.$message({
                  message: res.data.msg,
                  showClose: true,
                  duration: 3000,
                  type: "success",
                });
                this.loadData();
              } else {
                this.$message({
                  message: res.data.msg,
                  showClose: true,
                  duration: 3000,
                  type: "error",
                });
              }
              console.log(res);
            }
          })
          .catch((_) => {});
      } else {
        this.$message({
          message: "此部门还有子部门，不支持删除",
          showClose: true,
          duration: 3000,
          type: "warning",
        });
      }
    },
    //树状图添加
    append(data) {
      console.log("1", data);
      this.outerVisible = true;
      this.companyForm.project_id = data.project_id;
      this.companyForm.part_company_id = data.part_company_id;
      this.companyForm.department_id = data.department_id;
      this.companyForm.company_id = data.company_id;
      console.log(this.companyForm, "2221");

      if (data.type == "project") {
        this.isShow = true;
      } else {
        this.isShow = false;
      }
    },
    //树状图修改
    async edit(data) {
      console.log(data);
      /* this.ruleFormAmend.id = data.id; */
      if (data.type == "department") {
        this.ruleFormAmend.type = data.type;
        this.ruleFormAmend.id = data.department_id;
        let id = data.department_id;
        let res = await Getdepartments({ id });
        this.ruleFormAmend.title = res.data.data.title;
        this.ruleFormAmend.company_id = res.data.data.company_id;
        this.dialogVisibleAmend = true;
        console.log(res, "11");
      } else if (data.type == "project") {
        this.ruleFormAmend.type = data.type;
        this.ruleFormAmend.id = data.project_id;
        let id = data.project_id;
        let res = await seeProjects({ id });
        this.ruleFormAmend.title = res.data.data.title;
        this.ruleFormAmend.company_id = res.data.data.company_id;
        this.dialogVisibleAmend = true;
        console.log(res), "22";
      } else if (data.type == "part_company") {
        this.ruleFormAmend.type = data.type;
        this.ruleFormAmend.id = data.part_company_id;
        let id = data.part_company_id;
        let res = await GetpartCompanies({ id });
        this.ruleFormAmend.title = res.data.data.title;
        this.ruleFormAmend.company_id = res.data.data.company_id;
        this.dialogVisibleAmend = true;
        console.log(res);
      }
    },
    //批量导入成员
    Drawer() {
      this.drawer = true;
      this.NUmber = "zzjg";
      this.$nextTick(() => {
        this.$refs.demoDrawer.open2();
      });
    },
    /* 关闭批量导入成员蒙尘 */
    closeDrawer(value) {
      this.drawer = value;
      if (!this.drawer) {
        this.orgUser(this.IDS);
      }
    },
  },
  created() {
    this.loadData();
    this.orgUser(this.IDS);
  },
};
</script>


<style scoped lang="less">
@import "../../assets/css/tree.less";
.container {
  display: flex;
}
/deep/.treePlate .el-input {
  width: 240px !important;
}
.el-input {
  width: 60%;
}
.searchbgc2 {
  background-color: #3963fd;
  color: #fff;
}

.input-top {
  display: flex;
}
/deep/ .el-dialog__body {
  padding-top: 5px;
}

.tab {
  /deep/
    .el-form-item.is-required:not(.is-no-asterisk)
    > .el-form-item__label:before {
    display: none;
  }

  /deep/ .el-input {
    float: left;
    margin-right: 20px;
  }

  .login-btn {
    margin-top: 30px;
    margin-left: 60px;
    display: flex;
    justify-content: space-around;
  }

  .login-btn button {
    width: 30%;
    height: 36px;
    margin-bottom: 10px;
  }
}
/deep/.el-form-item__error {
  line-height: 2;
}
.container {
  display: flex;
}
.container-left {
  width: 350px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.el-form {
  margin-left: 20px;
}
.container-right {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.treePlate {
  width: 350px;
}
/deep/.el-tabs--card > .el-tabs__header .el-tabs__item {
  border: none;
  /*   border-left: 1px solid #e4e7ed; */
}
/deep/.el-form--label-left .el-form-item__label {
  text-align: right;
}
.commontop-right {
  padding-right: 17px;
}
/deep/.commontop .el-input {
  width: 40%;
}

/deep/.el-table__header {
  margin-bottom: 20px;
}
/deep/.el-table {
  background-color: #f3f5fb;
}
/deep/.el-table .cell {
  display: flex;
}
/deep/.el-button--mini {
  font-size: 18px !important;
}
.el-button--mini {
  padding: 7px 7px;
}
/deep/.el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: none;
}
</style>
